<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 100px;height: 100px;background-color: red" onclick="myFunctionDebounced()"> 这是点击事件</div>
</body>
</html>
<script>
    function debounce(callback, wait) {
        let timeout = null;
        return function() {
            let context = this;
            let args = arguments;

            if (timeout) clearTimeout(timeout);

            let callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null;
            }, wait)

            if (callNow) callback.apply(context, args);
        };
    }


    // 使用示例
    function myFunction() {
        console.log('Function executed!');
    }

    const list = [
        // {type: 'a', sub: 2, length: 10},
        // {type: 'a', sub: 2, length: 9},
        // {type: 'a', sub: 2, length: 8},
        // {type: 'a', sub: 2, length: 7},
        // {type: 'a', sub: 2, length: 6},
        // {type: 'a', sub: 2, length: 5},
    ]

    let uniqueSet = new Set();
    const data = {key: 'a', sub: 2, length: 10};
    const key = String(data.type) + String(data.sub);
    if (!uniqueSet.has(key)) {
        uniqueSet.add(key);
        list.push(data)
    }

    let myFunctionDebounced = debounce(myFunction, 10); //
</script>
